<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.68.3" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>vue下载excel数据 &middot; 我的博客</title>

  
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-0b ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/my_technology_blog/"><h1>我的博客</h1></a>
      <p class="lead">
       杨博的博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/my_technology_blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2021. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>vue下载excel数据</h1>
  <time datetime=2020-05-29T17:08:35&#43;0800 class="post-date">Fri, May 29, 2020</time>
  <p>###vue下载excel数据</p>
<p><strong>1、安装依赖包</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#ae81ff">1</span><span style="color:#960050;background-color:#1e0010">、</span><span style="color:#a6e22e">npm</span> <span style="color:#a6e22e">install</span> <span style="color:#f92672">-</span><span style="color:#a6e22e">S</span> <span style="color:#a6e22e">file</span><span style="color:#f92672">-</span><span style="color:#a6e22e">saver</span>
<span style="color:#ae81ff">2</span><span style="color:#960050;background-color:#1e0010">、</span><span style="color:#a6e22e">npm</span> <span style="color:#a6e22e">install</span> <span style="color:#f92672">-</span><span style="color:#a6e22e">S</span> <span style="color:#a6e22e">xlsx</span>
<span style="color:#ae81ff">3</span><span style="color:#960050;background-color:#1e0010">、</span><span style="color:#a6e22e">npm</span> <span style="color:#a6e22e">install</span> <span style="color:#f92672">-</span><span style="color:#a6e22e">D</span> <span style="color:#a6e22e">script</span><span style="color:#f92672">-</span><span style="color:#a6e22e">loader</span>
</code></pre></div><p><strong>2、在src目录下创建一个excel的文件夹</strong></p>
<p>​	2、1:在目录下创建Blob.js</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#75715e">/* eslint-disable */</span>
<span style="color:#75715e">/* Blob.js*/</span>

<span style="color:#75715e">/*global self, unescape */</span>
<span style="color:#75715e">/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
</span><span style="color:#75715e">  plusplus: true */</span>

<span style="color:#75715e">/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */</span>

(<span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">view</span>) {
  <span style="color:#e6db74">&#34;use strict&#34;</span>;

  <span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">URL</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">URL</span> <span style="color:#f92672">||</span> <span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">webkitURL</span>;

  <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">Blob</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">URL</span>) {
    <span style="color:#66d9ef">try</span> {
      <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Blob</span>;
      <span style="color:#66d9ef">return</span>;
    } <span style="color:#66d9ef">catch</span> (<span style="color:#a6e22e">e</span>) {
    }
  }

  <span style="color:#75715e">// Internally we use a BlobBuilder implementation to base Blob off of
</span><span style="color:#75715e"></span>  <span style="color:#75715e">// in order to support older browsers that only have BlobBuilder
</span><span style="color:#75715e"></span>  <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">BlobBuilder</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">BlobBuilder</span> <span style="color:#f92672">||</span> <span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">WebKitBlobBuilder</span> <span style="color:#f92672">||</span> <span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">MozBlobBuilder</span> <span style="color:#f92672">||</span> (<span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">view</span>) {
    <span style="color:#66d9ef">var</span>
      <span style="color:#a6e22e">get_class</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">object</span>) {
        <span style="color:#66d9ef">return</span> Object.<span style="color:#a6e22e">prototype</span>.<span style="color:#a6e22e">toString</span>.<span style="color:#a6e22e">call</span>(<span style="color:#a6e22e">object</span>).<span style="color:#a6e22e">match</span>(<span style="color:#e6db74">/^\[object\s(.*)\]$/</span>)[<span style="color:#ae81ff">1</span>];
      }
      , <span style="color:#a6e22e">FakeBlobBuilder</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">BlobBuilder</span>() {
        <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">data</span> <span style="color:#f92672">=</span> [];
      }
      , <span style="color:#a6e22e">FakeBlob</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Blob</span>(<span style="color:#a6e22e">data</span>, <span style="color:#a6e22e">type</span>, <span style="color:#a6e22e">encoding</span>) {
        <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">data</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">data</span>;
        <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">size</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">length</span>;
        <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">type</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">type</span>;
        <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">encoding</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">encoding</span>;
      }
      , <span style="color:#a6e22e">FBB_proto</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">FakeBlobBuilder</span>.<span style="color:#a6e22e">prototype</span>
      , <span style="color:#a6e22e">FB_proto</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">FakeBlob</span>.<span style="color:#a6e22e">prototype</span>
      , <span style="color:#a6e22e">FileReaderSync</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">FileReaderSync</span>
      , <span style="color:#a6e22e">FileException</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">type</span>) {
        <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">code</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">this</span>[<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">name</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">type</span>];
      }
      , <span style="color:#a6e22e">file_ex_codes</span> <span style="color:#f92672">=</span> (
        <span style="color:#e6db74">&#34;NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR &#34;</span>
        <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34;NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR&#34;</span>
      ).<span style="color:#a6e22e">split</span>(<span style="color:#e6db74">&#34; &#34;</span>)
      , <span style="color:#a6e22e">file_ex_code</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">file_ex_codes</span>.<span style="color:#a6e22e">length</span>
      , <span style="color:#a6e22e">real_URL</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">URL</span> <span style="color:#f92672">||</span> <span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">webkitURL</span> <span style="color:#f92672">||</span> <span style="color:#a6e22e">view</span>
      , <span style="color:#a6e22e">real_create_object_URL</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">real_URL</span>.<span style="color:#a6e22e">createObjectURL</span>
      , <span style="color:#a6e22e">real_revoke_object_URL</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">real_URL</span>.<span style="color:#a6e22e">revokeObjectURL</span>
      , <span style="color:#a6e22e">URL</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">real_URL</span>
      , <span style="color:#a6e22e">btoa</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">btoa</span>
      , <span style="color:#a6e22e">atob</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">atob</span>

      , <span style="color:#a6e22e">ArrayBuffer</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">ArrayBuffer</span>
      , <span style="color:#a6e22e">Uint8Array</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">Uint8Array</span>

      , <span style="color:#a6e22e">origin</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">/^[\w-]+:\/*\[?[\w\.:-]+\]?(?::[0-9]+)?/</span>
    ;
    <span style="color:#a6e22e">FakeBlob</span>.<span style="color:#a6e22e">fake</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">FB_proto</span>.<span style="color:#a6e22e">fake</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>;
    <span style="color:#66d9ef">while</span> (<span style="color:#a6e22e">file_ex_code</span><span style="color:#f92672">--</span>) {
      <span style="color:#a6e22e">FileException</span>.<span style="color:#a6e22e">prototype</span>[<span style="color:#a6e22e">file_ex_codes</span>[<span style="color:#a6e22e">file_ex_code</span>]] <span style="color:#f92672">=</span> <span style="color:#a6e22e">file_ex_code</span> <span style="color:#f92672">+</span> <span style="color:#ae81ff">1</span>;
    }
    <span style="color:#75715e">// Polyfill URL
</span><span style="color:#75715e"></span>    <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">real_URL</span>.<span style="color:#a6e22e">createObjectURL</span>) {
      <span style="color:#a6e22e">URL</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">URL</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">uri</span>) {
        <span style="color:#66d9ef">var</span>
          <span style="color:#a6e22e">uri_info</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">createElementNS</span>(<span style="color:#e6db74">&#34;http://www.w3.org/1999/xhtml&#34;</span>, <span style="color:#e6db74">&#34;a&#34;</span>)
          , <span style="color:#a6e22e">uri_origin</span>
        ;
        <span style="color:#a6e22e">uri_info</span>.<span style="color:#a6e22e">href</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">uri</span>;
        <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span>(<span style="color:#e6db74">&#34;origin&#34;</span> <span style="color:#66d9ef">in</span> <span style="color:#a6e22e">uri_info</span>)) {
          <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">uri_info</span>.<span style="color:#a6e22e">protocol</span>.<span style="color:#a6e22e">toLowerCase</span>() <span style="color:#f92672">===</span> <span style="color:#e6db74">&#34;data:&#34;</span>) {
            <span style="color:#a6e22e">uri_info</span>.<span style="color:#a6e22e">origin</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">null</span>;
          } <span style="color:#66d9ef">else</span> {
            <span style="color:#a6e22e">uri_origin</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">uri</span>.<span style="color:#a6e22e">match</span>(<span style="color:#a6e22e">origin</span>);
            <span style="color:#a6e22e">uri_info</span>.<span style="color:#a6e22e">origin</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">uri_origin</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">uri_origin</span>[<span style="color:#ae81ff">1</span>];
          }
        }
        <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">uri_info</span>;
      };
    }
    <span style="color:#a6e22e">URL</span>.<span style="color:#a6e22e">createObjectURL</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">blob</span>) {
      <span style="color:#66d9ef">var</span>
        <span style="color:#a6e22e">type</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">blob</span>.<span style="color:#a6e22e">type</span>
        , <span style="color:#a6e22e">data_URI_header</span>
      ;
      <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">type</span> <span style="color:#f92672">===</span> <span style="color:#66d9ef">null</span>) {
        <span style="color:#a6e22e">type</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;application/octet-stream&#34;</span>;
      }
      <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">blob</span> <span style="color:#66d9ef">instanceof</span> <span style="color:#a6e22e">FakeBlob</span>) {
        <span style="color:#a6e22e">data_URI_header</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;data:&#34;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">type</span>;
        <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">blob</span>.<span style="color:#a6e22e">encoding</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#34;base64&#34;</span>) {
          <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">data_URI_header</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34;;base64,&#34;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">blob</span>.<span style="color:#a6e22e">data</span>;
        } <span style="color:#66d9ef">else</span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">blob</span>.<span style="color:#a6e22e">encoding</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#34;URI&#34;</span>) {
          <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">data_URI_header</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34;,&#34;</span> <span style="color:#f92672">+</span> decodeURIComponent(<span style="color:#a6e22e">blob</span>.<span style="color:#a6e22e">data</span>);
        }
        <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">btoa</span>) {
          <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">data_URI_header</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34;;base64,&#34;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">btoa</span>(<span style="color:#a6e22e">blob</span>.<span style="color:#a6e22e">data</span>);
        } <span style="color:#66d9ef">else</span> {
          <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">data_URI_header</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34;,&#34;</span> <span style="color:#f92672">+</span> encodeURIComponent(<span style="color:#a6e22e">blob</span>.<span style="color:#a6e22e">data</span>);
        }
      } <span style="color:#66d9ef">else</span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">real_create_object_URL</span>) {
        <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">real_create_object_URL</span>.<span style="color:#a6e22e">call</span>(<span style="color:#a6e22e">real_URL</span>, <span style="color:#a6e22e">blob</span>);
      }
    };
    <span style="color:#a6e22e">URL</span>.<span style="color:#a6e22e">revokeObjectURL</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">object_URL</span>) {
      <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">object_URL</span>.<span style="color:#a6e22e">substring</span>(<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">5</span>) <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#34;data:&#34;</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">real_revoke_object_URL</span>) {
        <span style="color:#a6e22e">real_revoke_object_URL</span>.<span style="color:#a6e22e">call</span>(<span style="color:#a6e22e">real_URL</span>, <span style="color:#a6e22e">object_URL</span>);
      }
    };
    <span style="color:#a6e22e">FBB_proto</span>.<span style="color:#a6e22e">append</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">data</span><span style="color:#75715e">/*, endings*/</span>) {
      <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">bb</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">data</span>;
      <span style="color:#75715e">// decode data to a binary string
</span><span style="color:#75715e"></span>      <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">Uint8Array</span> <span style="color:#f92672">&amp;&amp;</span> (<span style="color:#a6e22e">data</span> <span style="color:#66d9ef">instanceof</span> <span style="color:#a6e22e">ArrayBuffer</span> <span style="color:#f92672">||</span> <span style="color:#a6e22e">data</span> <span style="color:#66d9ef">instanceof</span> <span style="color:#a6e22e">Uint8Array</span>)) {
        <span style="color:#66d9ef">var</span>
          <span style="color:#a6e22e">str</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;&#34;</span>
          , <span style="color:#a6e22e">buf</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Uint8Array</span>(<span style="color:#a6e22e">data</span>)
          , <span style="color:#a6e22e">i</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>
          , <span style="color:#a6e22e">buf_len</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">buf</span>.<span style="color:#a6e22e">length</span>
        ;
        <span style="color:#66d9ef">for</span> (; <span style="color:#a6e22e">i</span> <span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">buf_len</span>; <span style="color:#a6e22e">i</span><span style="color:#f92672">++</span>) {
          <span style="color:#a6e22e">str</span> <span style="color:#f92672">+=</span> String.<span style="color:#a6e22e">fromCharCode</span>(<span style="color:#a6e22e">buf</span>[<span style="color:#a6e22e">i</span>]);
        }
        <span style="color:#a6e22e">bb</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">str</span>);
      } <span style="color:#66d9ef">else</span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">get_class</span>(<span style="color:#a6e22e">data</span>) <span style="color:#f92672">===</span> <span style="color:#e6db74">&#34;Blob&#34;</span> <span style="color:#f92672">||</span> <span style="color:#a6e22e">get_class</span>(<span style="color:#a6e22e">data</span>) <span style="color:#f92672">===</span> <span style="color:#e6db74">&#34;File&#34;</span>) {
        <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">FileReaderSync</span>) {
          <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">fr</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">FileReaderSync</span>;
          <span style="color:#a6e22e">bb</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">fr</span>.<span style="color:#a6e22e">readAsBinaryString</span>(<span style="color:#a6e22e">data</span>));
        } <span style="color:#66d9ef">else</span> {
          <span style="color:#75715e">// async FileReader won&#39;t work as BlobBuilder is sync
</span><span style="color:#75715e"></span>          <span style="color:#66d9ef">throw</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">FileException</span>(<span style="color:#e6db74">&#34;NOT_READABLE_ERR&#34;</span>);
        }
      } <span style="color:#66d9ef">else</span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">data</span> <span style="color:#66d9ef">instanceof</span> <span style="color:#a6e22e">FakeBlob</span>) {
        <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">encoding</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#34;base64&#34;</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">atob</span>) {
          <span style="color:#a6e22e">bb</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">atob</span>(<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">data</span>));
        } <span style="color:#66d9ef">else</span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">encoding</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#34;URI&#34;</span>) {
          <span style="color:#a6e22e">bb</span>.<span style="color:#a6e22e">push</span>(decodeURIComponent(<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">data</span>));
        } <span style="color:#66d9ef">else</span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">encoding</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#34;raw&#34;</span>) {
          <span style="color:#a6e22e">bb</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">data</span>);
        }
      } <span style="color:#66d9ef">else</span> {
        <span style="color:#66d9ef">if</span> (<span style="color:#66d9ef">typeof</span> <span style="color:#a6e22e">data</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#34;string&#34;</span>) {
          <span style="color:#a6e22e">data</span> <span style="color:#f92672">+=</span> <span style="color:#e6db74">&#34;&#34;</span>; <span style="color:#75715e">// convert unsupported types to strings
</span><span style="color:#75715e"></span>        }
        <span style="color:#75715e">// decode UTF-16 to binary string
</span><span style="color:#75715e"></span>        <span style="color:#a6e22e">bb</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">unescape</span>(encodeURIComponent(<span style="color:#a6e22e">data</span>)));
      }
    };
    <span style="color:#a6e22e">FBB_proto</span>.<span style="color:#a6e22e">getBlob</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">type</span>) {
      <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">arguments</span>.<span style="color:#a6e22e">length</span>) {
        <span style="color:#a6e22e">type</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">null</span>;
      }
      <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">FakeBlob</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">join</span>(<span style="color:#e6db74">&#34;&#34;</span>), <span style="color:#a6e22e">type</span>, <span style="color:#e6db74">&#34;raw&#34;</span>);
    };
    <span style="color:#a6e22e">FBB_proto</span>.<span style="color:#a6e22e">toString</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span> () {
      <span style="color:#66d9ef">return</span> <span style="color:#e6db74">&#34;[object BlobBuilder]&#34;</span>;
    };
    <span style="color:#a6e22e">FB_proto</span>.<span style="color:#a6e22e">slice</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">start</span>, <span style="color:#a6e22e">end</span>, <span style="color:#a6e22e">type</span>) {
      <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">args</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">arguments</span>.<span style="color:#a6e22e">length</span>;
      <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">args</span> <span style="color:#f92672">&lt;</span> <span style="color:#ae81ff">3</span>) {
        <span style="color:#a6e22e">type</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">null</span>;
      }
      <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">FakeBlob</span>(
        <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">slice</span>(<span style="color:#a6e22e">start</span>, <span style="color:#a6e22e">args</span> <span style="color:#f92672">&gt;</span> <span style="color:#ae81ff">1</span> <span style="color:#f92672">?</span> <span style="color:#a6e22e">end</span> <span style="color:#f92672">:</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">length</span>)
        , <span style="color:#a6e22e">type</span>
        , <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">encoding</span>
      );
    };
    <span style="color:#a6e22e">FB_proto</span>.<span style="color:#a6e22e">toString</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span> () {
      <span style="color:#66d9ef">return</span> <span style="color:#e6db74">&#34;[object Blob]&#34;</span>;
    };
    <span style="color:#a6e22e">FB_proto</span>.<span style="color:#a6e22e">close</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span> () {
      <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">size</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>;
      <span style="color:#66d9ef">delete</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">data</span>;
    };
    <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">FakeBlobBuilder</span>;
  }(<span style="color:#a6e22e">view</span>));

  <span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">Blob</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">blobParts</span>, <span style="color:#a6e22e">options</span>) {
    <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">type</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">options</span> <span style="color:#f92672">?</span> (<span style="color:#a6e22e">options</span>.<span style="color:#a6e22e">type</span> <span style="color:#f92672">||</span> <span style="color:#e6db74">&#34;&#34;</span>) <span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;&#34;</span>;
    <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">builder</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">BlobBuilder</span>();
    <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">blobParts</span>) {
      <span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">i</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>, <span style="color:#a6e22e">len</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">blobParts</span>.<span style="color:#a6e22e">length</span>; <span style="color:#a6e22e">i</span> <span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">len</span>; <span style="color:#a6e22e">i</span><span style="color:#f92672">++</span>) {
        <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">Uint8Array</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">blobParts</span>[<span style="color:#a6e22e">i</span>] <span style="color:#66d9ef">instanceof</span> <span style="color:#a6e22e">Uint8Array</span>) {
          <span style="color:#a6e22e">builder</span>.<span style="color:#a6e22e">append</span>(<span style="color:#a6e22e">blobParts</span>[<span style="color:#a6e22e">i</span>].<span style="color:#a6e22e">buffer</span>);
        }
        <span style="color:#66d9ef">else</span> {
          <span style="color:#a6e22e">builder</span>.<span style="color:#a6e22e">append</span>(<span style="color:#a6e22e">blobParts</span>[<span style="color:#a6e22e">i</span>]);
        }
      }
    }
    <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">blob</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">builder</span>.<span style="color:#a6e22e">getBlob</span>(<span style="color:#a6e22e">type</span>);
    <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">blob</span>.<span style="color:#a6e22e">slice</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">blob</span>.<span style="color:#a6e22e">webkitSlice</span>) {
      <span style="color:#a6e22e">blob</span>.<span style="color:#a6e22e">slice</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">blob</span>.<span style="color:#a6e22e">webkitSlice</span>;
    }
    <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">blob</span>;
  };

  <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">getPrototypeOf</span> <span style="color:#f92672">=</span> Object.<span style="color:#a6e22e">getPrototypeOf</span> <span style="color:#f92672">||</span> <span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">object</span>) {
    <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">object</span>.<span style="color:#a6e22e">__proto__</span>;
  };
  <span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">Blob</span>.<span style="color:#a6e22e">prototype</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getPrototypeOf</span>(<span style="color:#66d9ef">new</span> <span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">Blob</span>());
}(
  <span style="color:#66d9ef">typeof</span> <span style="color:#a6e22e">self</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#34;undefined&#34;</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">self</span>
  <span style="color:#f92672">||</span> <span style="color:#66d9ef">typeof</span> window <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#34;undefined&#34;</span> <span style="color:#f92672">&amp;&amp;</span> window
  <span style="color:#f92672">||</span> <span style="color:#66d9ef">this</span>
));

</code></pre></div><p>2\2:在目录下创建Export2Excel.js</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#75715e">/* eslint-disable */</span>
<span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#39;script-loader!file-saver&#39;</span>);
<span style="color:#75715e">// require(&#39;script-loader!src/vendor/Blob&#39;);
</span><span style="color:#75715e"></span><span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#39;./Blob.js&#39;</span>)
<span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#39;script-loader!xlsx/dist/xlsx.core.min&#39;</span>);

<span style="color:#66d9ef">function</span> <span style="color:#a6e22e">generateArray</span>(<span style="color:#a6e22e">table</span>) {
  <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">out</span> <span style="color:#f92672">=</span> [];
  <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">rows</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">table</span>.<span style="color:#a6e22e">querySelectorAll</span>(<span style="color:#e6db74">&#39;tr&#39;</span>);
  <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">ranges</span> <span style="color:#f92672">=</span> [];
  <span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">R</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>; <span style="color:#a6e22e">R</span> <span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">rows</span>.<span style="color:#a6e22e">length</span>; <span style="color:#f92672">++</span><span style="color:#a6e22e">R</span>) {
    <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">outRow</span> <span style="color:#f92672">=</span> [];
    <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">row</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">rows</span>[<span style="color:#a6e22e">R</span>];
    <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">columns</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">row</span>.<span style="color:#a6e22e">querySelectorAll</span>(<span style="color:#e6db74">&#39;td&#39;</span>);
    <span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">C</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>; <span style="color:#a6e22e">C</span> <span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">columns</span>.<span style="color:#a6e22e">length</span>; <span style="color:#f92672">++</span><span style="color:#a6e22e">C</span>) {
      <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">cell</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">columns</span>[<span style="color:#a6e22e">C</span>];
      <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">colspan</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">cell</span>.<span style="color:#a6e22e">getAttribute</span>(<span style="color:#e6db74">&#39;colspan&#39;</span>);
      <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">rowspan</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">cell</span>.<span style="color:#a6e22e">getAttribute</span>(<span style="color:#e6db74">&#39;rowspan&#39;</span>);
      <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">cellValue</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">cell</span>.<span style="color:#a6e22e">innerText</span>;
      <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">cellValue</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">cellValue</span> <span style="color:#f92672">==</span> <span style="color:#f92672">+</span><span style="color:#a6e22e">cellValue</span>) <span style="color:#a6e22e">cellValue</span> <span style="color:#f92672">=</span> <span style="color:#f92672">+</span><span style="color:#a6e22e">cellValue</span>;

      <span style="color:#75715e">//Skip ranges
</span><span style="color:#75715e"></span>      <span style="color:#a6e22e">ranges</span>.<span style="color:#a6e22e">forEach</span>(<span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">range</span>) {
        <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">R</span> <span style="color:#f92672">&gt;=</span> <span style="color:#a6e22e">range</span>.<span style="color:#a6e22e">s</span>.<span style="color:#a6e22e">r</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">R</span> <span style="color:#f92672">&lt;=</span> <span style="color:#a6e22e">range</span>.<span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">r</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">outRow</span>.<span style="color:#a6e22e">length</span> <span style="color:#f92672">&gt;=</span> <span style="color:#a6e22e">range</span>.<span style="color:#a6e22e">s</span>.<span style="color:#a6e22e">c</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">outRow</span>.<span style="color:#a6e22e">length</span> <span style="color:#f92672">&lt;=</span> <span style="color:#a6e22e">range</span>.<span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">c</span>) {
          <span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">i</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>; <span style="color:#a6e22e">i</span> <span style="color:#f92672">&lt;=</span> <span style="color:#a6e22e">range</span>.<span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">c</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">range</span>.<span style="color:#a6e22e">s</span>.<span style="color:#a6e22e">c</span>; <span style="color:#f92672">++</span><span style="color:#a6e22e">i</span>) <span style="color:#a6e22e">outRow</span>.<span style="color:#a6e22e">push</span>(<span style="color:#66d9ef">null</span>);
        }
      });

      <span style="color:#75715e">//Handle Row Span
</span><span style="color:#75715e"></span>      <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">rowspan</span> <span style="color:#f92672">||</span> <span style="color:#a6e22e">colspan</span>) {
        <span style="color:#a6e22e">rowspan</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">rowspan</span> <span style="color:#f92672">||</span> <span style="color:#ae81ff">1</span>;
        <span style="color:#a6e22e">colspan</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">colspan</span> <span style="color:#f92672">||</span> <span style="color:#ae81ff">1</span>;
        <span style="color:#a6e22e">ranges</span>.<span style="color:#a6e22e">push</span>({<span style="color:#a6e22e">s</span><span style="color:#f92672">:</span> {<span style="color:#a6e22e">r</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">R</span>, <span style="color:#a6e22e">c</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">outRow</span>.<span style="color:#a6e22e">length</span>}, <span style="color:#a6e22e">e</span><span style="color:#f92672">:</span> {<span style="color:#a6e22e">r</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">R</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">rowspan</span> <span style="color:#f92672">-</span> <span style="color:#ae81ff">1</span>, <span style="color:#a6e22e">c</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">outRow</span>.<span style="color:#a6e22e">length</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">colspan</span> <span style="color:#f92672">-</span> <span style="color:#ae81ff">1</span>}});
      }
      ;

      <span style="color:#75715e">//Handle Value
</span><span style="color:#75715e"></span>      <span style="color:#a6e22e">outRow</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">cellValue</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#f92672">?</span> <span style="color:#a6e22e">cellValue</span> <span style="color:#f92672">:</span> <span style="color:#66d9ef">null</span>);

      <span style="color:#75715e">//Handle Colspan
</span><span style="color:#75715e"></span>      <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">colspan</span>) <span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">k</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>; <span style="color:#a6e22e">k</span> <span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">colspan</span> <span style="color:#f92672">-</span> <span style="color:#ae81ff">1</span>; <span style="color:#f92672">++</span><span style="color:#a6e22e">k</span>) <span style="color:#a6e22e">outRow</span>.<span style="color:#a6e22e">push</span>(<span style="color:#66d9ef">null</span>);
    }
    <span style="color:#a6e22e">out</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">outRow</span>);
  }
  <span style="color:#66d9ef">return</span> [<span style="color:#a6e22e">out</span>, <span style="color:#a6e22e">ranges</span>];
};

<span style="color:#66d9ef">function</span> <span style="color:#a6e22e">datenum</span>(<span style="color:#a6e22e">v</span>, <span style="color:#a6e22e">date1904</span>) {
  <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">date1904</span>) <span style="color:#a6e22e">v</span> <span style="color:#f92672">+=</span> <span style="color:#ae81ff">1462</span>;
  <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">epoch</span> <span style="color:#f92672">=</span> Date.<span style="color:#a6e22e">parse</span>(<span style="color:#a6e22e">v</span>);
  <span style="color:#66d9ef">return</span> (<span style="color:#a6e22e">epoch</span> <span style="color:#f92672">-</span> <span style="color:#66d9ef">new</span> Date(Date.<span style="color:#a6e22e">UTC</span>(<span style="color:#ae81ff">1899</span>, <span style="color:#ae81ff">11</span>, <span style="color:#ae81ff">30</span>))) <span style="color:#f92672">/</span> (<span style="color:#ae81ff">24</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">60</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">60</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">1000</span>);
}

<span style="color:#66d9ef">function</span> <span style="color:#a6e22e">sheet_from_array_of_arrays</span>(<span style="color:#a6e22e">data</span>, <span style="color:#a6e22e">opts</span>) {
  <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">ws</span> <span style="color:#f92672">=</span> {};
  <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">range</span> <span style="color:#f92672">=</span> {<span style="color:#a6e22e">s</span><span style="color:#f92672">:</span> {<span style="color:#a6e22e">c</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">10000000</span>, <span style="color:#a6e22e">r</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">10000000</span>}, <span style="color:#a6e22e">e</span><span style="color:#f92672">:</span> {<span style="color:#a6e22e">c</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span>, <span style="color:#a6e22e">r</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span>}};
  <span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">R</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>; <span style="color:#a6e22e">R</span> <span style="color:#f92672">!=</span> <span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">length</span>; <span style="color:#f92672">++</span><span style="color:#a6e22e">R</span>) {
    <span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">C</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>; <span style="color:#a6e22e">C</span> <span style="color:#f92672">!=</span> <span style="color:#a6e22e">data</span>[<span style="color:#a6e22e">R</span>].<span style="color:#a6e22e">length</span>; <span style="color:#f92672">++</span><span style="color:#a6e22e">C</span>) {
      <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">range</span>.<span style="color:#a6e22e">s</span>.<span style="color:#a6e22e">r</span> <span style="color:#f92672">&gt;</span> <span style="color:#a6e22e">R</span>) <span style="color:#a6e22e">range</span>.<span style="color:#a6e22e">s</span>.<span style="color:#a6e22e">r</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">R</span>;
      <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">range</span>.<span style="color:#a6e22e">s</span>.<span style="color:#a6e22e">c</span> <span style="color:#f92672">&gt;</span> <span style="color:#a6e22e">C</span>) <span style="color:#a6e22e">range</span>.<span style="color:#a6e22e">s</span>.<span style="color:#a6e22e">c</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">C</span>;
      <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">range</span>.<span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">r</span> <span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">R</span>) <span style="color:#a6e22e">range</span>.<span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">r</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">R</span>;
      <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">range</span>.<span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">c</span> <span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">C</span>) <span style="color:#a6e22e">range</span>.<span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">c</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">C</span>;
      <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">cell</span> <span style="color:#f92672">=</span> {<span style="color:#a6e22e">v</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">data</span>[<span style="color:#a6e22e">R</span>][<span style="color:#a6e22e">C</span>]};
      <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">cell</span>.<span style="color:#a6e22e">v</span> <span style="color:#f92672">==</span> <span style="color:#66d9ef">null</span>) <span style="color:#66d9ef">continue</span>;
      <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">cell_ref</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">XLSX</span>.<span style="color:#a6e22e">utils</span>.<span style="color:#a6e22e">encode_cell</span>({<span style="color:#a6e22e">c</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">C</span>, <span style="color:#a6e22e">r</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">R</span>});

      <span style="color:#66d9ef">if</span> (<span style="color:#66d9ef">typeof</span> <span style="color:#a6e22e">cell</span>.<span style="color:#a6e22e">v</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#39;number&#39;</span>) <span style="color:#a6e22e">cell</span>.<span style="color:#a6e22e">t</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;n&#39;</span>;
      <span style="color:#66d9ef">else</span> <span style="color:#66d9ef">if</span> (<span style="color:#66d9ef">typeof</span> <span style="color:#a6e22e">cell</span>.<span style="color:#a6e22e">v</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#39;boolean&#39;</span>) <span style="color:#a6e22e">cell</span>.<span style="color:#a6e22e">t</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;b&#39;</span>;
      <span style="color:#66d9ef">else</span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">cell</span>.<span style="color:#a6e22e">v</span> <span style="color:#66d9ef">instanceof</span> Date) {
        <span style="color:#a6e22e">cell</span>.<span style="color:#a6e22e">t</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;n&#39;</span>;
        <span style="color:#a6e22e">cell</span>.<span style="color:#a6e22e">z</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">XLSX</span>.<span style="color:#a6e22e">SSF</span>.<span style="color:#a6e22e">_table</span>[<span style="color:#ae81ff">14</span>];
        <span style="color:#a6e22e">cell</span>.<span style="color:#a6e22e">v</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">datenum</span>(<span style="color:#a6e22e">cell</span>.<span style="color:#a6e22e">v</span>);
      }
      <span style="color:#66d9ef">else</span> <span style="color:#a6e22e">cell</span>.<span style="color:#a6e22e">t</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;s&#39;</span>;

      <span style="color:#a6e22e">ws</span>[<span style="color:#a6e22e">cell_ref</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">cell</span>;
    }
  }
  <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">range</span>.<span style="color:#a6e22e">s</span>.<span style="color:#a6e22e">c</span> <span style="color:#f92672">&lt;</span> <span style="color:#ae81ff">10000000</span>) <span style="color:#a6e22e">ws</span>[<span style="color:#e6db74">&#39;!ref&#39;</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">XLSX</span>.<span style="color:#a6e22e">utils</span>.<span style="color:#a6e22e">encode_range</span>(<span style="color:#a6e22e">range</span>);
  <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">ws</span>;
}

<span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Workbook</span>() {
  <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span>(<span style="color:#66d9ef">this</span> <span style="color:#66d9ef">instanceof</span> <span style="color:#a6e22e">Workbook</span>)) <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Workbook</span>();
  <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">SheetNames</span> <span style="color:#f92672">=</span> [];
  <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">Sheets</span> <span style="color:#f92672">=</span> {};
}

<span style="color:#66d9ef">function</span> <span style="color:#a6e22e">s2ab</span>(<span style="color:#a6e22e">s</span>) {
  <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">buf</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">ArrayBuffer</span>(<span style="color:#a6e22e">s</span>.<span style="color:#a6e22e">length</span>);
  <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">view</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Uint8Array</span>(<span style="color:#a6e22e">buf</span>);
  <span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">i</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>; <span style="color:#a6e22e">i</span> <span style="color:#f92672">!=</span> <span style="color:#a6e22e">s</span>.<span style="color:#a6e22e">length</span>; <span style="color:#f92672">++</span><span style="color:#a6e22e">i</span>) <span style="color:#a6e22e">view</span>[<span style="color:#a6e22e">i</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">s</span>.<span style="color:#a6e22e">charCodeAt</span>(<span style="color:#a6e22e">i</span>) <span style="color:#f92672">&amp;</span> <span style="color:#ae81ff">0xFF</span>;
  <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">buf</span>;
}

<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">export_table_to_excel</span>(<span style="color:#a6e22e">id</span>) {
  <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">theTable</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#a6e22e">id</span>);
  <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;a&#39;</span>)
  <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">oo</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">generateArray</span>(<span style="color:#a6e22e">theTable</span>);
  <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">ranges</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">oo</span>[<span style="color:#ae81ff">1</span>];

  <span style="color:#75715e">/* original data */</span>
  <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">data</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">oo</span>[<span style="color:#ae81ff">0</span>];
  <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">ws_name</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;SheetJS&#34;</span>;
  <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">data</span>);

  <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">wb</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Workbook</span>(), <span style="color:#a6e22e">ws</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">sheet_from_array_of_arrays</span>(<span style="color:#a6e22e">data</span>);

  <span style="color:#75715e">/* add ranges to worksheet */</span>
  <span style="color:#75715e">// ws[&#39;!cols&#39;] = [&#39;apple&#39;, &#39;banan&#39;];
</span><span style="color:#75715e"></span>  <span style="color:#a6e22e">ws</span>[<span style="color:#e6db74">&#39;!merges&#39;</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">ranges</span>;

  <span style="color:#75715e">/* add worksheet to workbook */</span>
  <span style="color:#a6e22e">wb</span>.<span style="color:#a6e22e">SheetNames</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">ws_name</span>);
  <span style="color:#a6e22e">wb</span>.<span style="color:#a6e22e">Sheets</span>[<span style="color:#a6e22e">ws_name</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">ws</span>;

  <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">wbout</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">XLSX</span>.<span style="color:#a6e22e">write</span>(<span style="color:#a6e22e">wb</span>, {<span style="color:#a6e22e">bookType</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;xlsx&#39;</span>, <span style="color:#a6e22e">bookSST</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</span>, <span style="color:#a6e22e">type</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;binary&#39;</span>});

  <span style="color:#a6e22e">saveAs</span>(<span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Blob</span>([<span style="color:#a6e22e">s2ab</span>(<span style="color:#a6e22e">wbout</span>)], {<span style="color:#a6e22e">type</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;application/octet-stream&#34;</span>}), <span style="color:#e6db74">&#34;test.xlsx&#34;</span>)
}

<span style="color:#66d9ef">function</span> <span style="color:#a6e22e">formatJson</span>(<span style="color:#a6e22e">jsonData</span>) {
  <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">jsonData</span>)
}

<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">export_json_to_excel</span>(<span style="color:#a6e22e">th</span>, <span style="color:#a6e22e">jsonData</span>, <span style="color:#a6e22e">defaultTitle</span>) {

  <span style="color:#75715e">/* original data */</span>

  <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">data</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">jsonData</span>;
  <span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">unshift</span>(<span style="color:#a6e22e">th</span>);
  <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">ws_name</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;SheetJS&#34;</span>;

  <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">wb</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Workbook</span>(), <span style="color:#a6e22e">ws</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">sheet_from_array_of_arrays</span>(<span style="color:#a6e22e">data</span>);


  <span style="color:#75715e">/* add worksheet to workbook */</span>
  <span style="color:#a6e22e">wb</span>.<span style="color:#a6e22e">SheetNames</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">ws_name</span>);
  <span style="color:#a6e22e">wb</span>.<span style="color:#a6e22e">Sheets</span>[<span style="color:#a6e22e">ws_name</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">ws</span>;

  <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">wbout</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">XLSX</span>.<span style="color:#a6e22e">write</span>(<span style="color:#a6e22e">wb</span>, {<span style="color:#a6e22e">bookType</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;xlsx&#39;</span>, <span style="color:#a6e22e">bookSST</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</span>, <span style="color:#a6e22e">type</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;binary&#39;</span>});
  <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">title</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">defaultTitle</span> <span style="color:#f92672">||</span> <span style="color:#e6db74">&#39;列表&#39;</span>
  <span style="color:#a6e22e">saveAs</span>(<span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Blob</span>([<span style="color:#a6e22e">s2ab</span>(<span style="color:#a6e22e">wbout</span>)], {<span style="color:#a6e22e">type</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;application/octet-stream&#34;</span>}), <span style="color:#a6e22e">title</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34;.xlsx&#34;</span>)
}

</code></pre></div><p><strong>3、在build文件夹下找到webpack.base.conf.js做如下修改</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">resolve</span><span style="color:#f92672">:</span> {
    <span style="color:#a6e22e">extensions</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#39;.js&#39;</span>, <span style="color:#e6db74">&#39;.vue&#39;</span>, <span style="color:#e6db74">&#39;.json&#39;</span>],
    <span style="color:#a6e22e">alias</span><span style="color:#f92672">:</span> {
      <span style="color:#e6db74">&#39;vue$&#39;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;vue/dist/vue.esm.js&#39;</span>,
      <span style="color:#e6db74">&#39;@&#39;</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#39;src&#39;</span>),
      <span style="color:#e6db74">&#39;scss_vars&#39;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;@/styles/vars.scss&#39;</span>,
      <span style="color:#e6db74">&#39;excel&#39;</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">path</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#a6e22e">__dirname</span>, <span style="color:#e6db74">&#39;../src/excel&#39;</span>),<span style="color:#75715e">//新增一行
</span><span style="color:#75715e"></span>    }
  },
</code></pre></div><p><strong>4、四、在vue文件中添加下载功能（其中downloadExcel为下载事件，及按钮触发下载事件）</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue">			<span style="color:#75715e">// 文件下载
</span><span style="color:#75715e"></span>        <span style="color:#a6e22e">ExcelLog</span>() {
            <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">ensure</span>([], () =&gt; {
                <span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">export_json_to_excel</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#39;../excel/Export2Excel&#39;</span>)
                <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">tHeader</span> <span style="color:#f92672">=</span> [<span style="color:#e6db74">&#39;日期&#39;</span>,<span style="color:#e6db74">&#39;温度&#39;</span>]   <span style="color:#75715e">// 自定义标题
</span><span style="color:#75715e"></span>                <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">filterVal</span> <span style="color:#f92672">=</span> [<span style="color:#e6db74">&#39;time&#39;</span>,<span style="color:#e6db74">&#39;wen&#39;</span>]   <span style="color:#75715e">// 对应表字段
</span><span style="color:#75715e"></span>                <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">list</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">TemperLog</span>   <span style="color:#75715e">// 需要下载的数据
</span><span style="color:#75715e"></span>                <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">data</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">formatJson</span>(<span style="color:#a6e22e">filterVal</span>, <span style="color:#a6e22e">list</span>);
                <span style="color:#a6e22e">export_json_to_excel</span>(<span style="color:#a6e22e">tHeader</span>, <span style="color:#a6e22e">data</span>, <span style="color:#e6db74">&#39;温度详情&#39;</span>);  <span style="color:#75715e">//导出文件名称
</span><span style="color:#75715e"></span>            })
				},
		<span style="color:#75715e">// 文件下载所调用函数
</span><span style="color:#75715e"></span>        <span style="color:#a6e22e">formatJson</span>(<span style="color:#a6e22e">filterVal</span>, <span style="color:#a6e22e">jsonData</span>) {
            <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">info</span>(<span style="color:#a6e22e">jsonData</span>)
            <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">jsonData</span>.<span style="color:#a6e22e">map</span>(<span style="color:#a6e22e">v</span> =&gt; <span style="color:#a6e22e">filterVal</span>.<span style="color:#a6e22e">map</span>(<span style="color:#a6e22e">j</span> =&gt; <span style="color:#a6e22e">v</span>[<span style="color:#a6e22e">j</span>]))
        },
</code></pre></div><p><strong>注意</strong></p>
<p>​	<em>后端传过来的温度时间为列表套字典类型，且温度的key要相同，时间的key也要相同</em></p>
<p><strong>后端示例</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#66d9ef">class</span> <span style="color:#a6e22e">Good</span>(APIView):
    <span style="color:#66d9ef">def</span> <span style="color:#a6e22e">get</span>(self,request):
        id <span style="color:#f92672">=</span> request<span style="color:#f92672">.</span>GET<span style="color:#f92672">.</span>get(<span style="color:#e6db74">&#39;id&#39;</span>)
        good <span style="color:#f92672">=</span> Goods<span style="color:#f92672">.</span>objects<span style="color:#f92672">.</span>filter(id<span style="color:#f92672">=</span>id)<span style="color:#f92672">.</span>first()
        wen_list <span style="color:#f92672">=</span> eval(good<span style="color:#f92672">.</span>wenlist)
        <span style="color:#66d9ef">print</span>(wen_list)
        <span style="color:#66d9ef">print</span>(type(wen_list))
        alist <span style="color:#f92672">=</span> []
        <span style="color:#66d9ef">for</span> i <span style="color:#f92672">in</span> wen_list:
            <span style="color:#66d9ef">for</span> k, v <span style="color:#f92672">in</span> dict(i)<span style="color:#f92672">.</span>items():
                adict <span style="color:#f92672">=</span> {}
                adict[<span style="color:#e6db74">&#39;wen&#39;</span>] <span style="color:#f92672">=</span> v
                adict[<span style="color:#e6db74">&#39;time&#39;</span>] <span style="color:#f92672">=</span> k
                alist<span style="color:#f92672">.</span>append(adict)
        <span style="color:#66d9ef">print</span>(alist)
        goods_ser <span style="color:#f92672">=</span> myser<span style="color:#f92672">.</span>GoodsSerialize(good)<span style="color:#f92672">.</span>data
        goods_ser[<span style="color:#e6db74">&#39;blist&#39;</span>] <span style="color:#f92672">=</span> alist
        res <span style="color:#f92672">=</span> {}
        res[<span style="color:#e6db74">&#39;code&#39;</span>] <span style="color:#f92672">=</span> <span style="color:#ae81ff">200</span>
        res[<span style="color:#e6db74">&#39;goodslist&#39;</span>] <span style="color:#f92672">=</span> goods_ser
        <span style="color:#66d9ef">return</span> Response(res)
</code></pre></div>
</div>


    </main>

    
  </body>
</html>
